<script setup>
/**
 *
 * @author 高桥凉介
 * @date 2024-12-24 02:53:04
 */
</script>

<template>
  <div id="centerPage">
    <div>
      <el-card>
        <h2>捐赠中心</h2>
        <div>
          <span class="numItem">14</span><span style="margin-right: 1rem">总物品</span>
          <span class="numItem">0</span><span style="margin-right: 1rem">今日新增</span>
          <span class="numItem">3</span><span>捐赠者</span>
        </div>
      </el-card>
    </div>
    <div class="itemList">
        <el-card class="item" shadow="hover">
            <img src="../assets/pro.jpg" width="200px" height="150px" style="border-radius: 10px;
            margin-left: 5rem;
            ">
            <div style="margin-left:5rem"><h4>哈利波特</h4></div>
            <el-button style="margin-left: 5rem" plain class="title">书籍</el-button>
            <div style="margin-top: 1rem;margin-left: 5rem">没怎么看几乎全新</div>
            <div style="margin-top: 1rem;margin-left: 5rem"><span style="margin-right: 1rem">地点</span>  <span>时间</span></div>
            <el-button type="warning" style="margin-top: 1rem; margin-left: 15rem">申请认领</el-button>
            <el-button type="primary" style="margin-top: 1rem">查看详情</el-button>
        </el-card>
    </div>
  </div>
</template>

<style scoped>
.itemList{
  display: flex;
  margin-top: 1rem;
}
.item{
  width: 30rem;
  height: 25rem;
}
.title{
  margin-top: 1rem;
}
.numItem{
  font-weight: bold;
  color: red;
  margin-right: 1rem;
}
</style>
